<template>
  <view class="top-bar"></view>
  <view class="header-cont">
    <view class="header">
      <view class="header-msg">
        <image class="header-image" src="../../static/images/pople.png" mode=""></image>
        <view class="user-info">
          <view>
            <text class="title">艾小逗</text>
            <text class="sub-title">xxx</text>
          </view>
          <text class="sub-title">xxxxx</text>
        </view>
      </view>
    </view>
  </view>
  <view class="card-content content content-first">
    <uni-list :border="false">
      <uni-list-item :showExtraIcon="true" :extraIcon="{color: '#2b6ae1',size: '18', type: 'gear'}" title="设置" link
                     to="/pages/system-set/system-set"/>
      <uni-list-item :showExtraIcon="true" :extraIcon="{color: '#27c0dc',size: '18', type: 'person'}" title="关于我们"
                     link to="/pages/about/about"/>
      <uni-list-item :showExtraIcon="true" :extraIcon="{color: '#ff8a00',size: '18', type: 'info'}" title="版本号"
                     :right-text="'V ' + curVersion" :clickable="true" @click="onClick($event,2)"/>
    </uni-list>
  </view>
  <view class="card-content content">
    <uni-list :border="false">
      <uni-list-item :showExtraIcon="true" :extraIcon="{color: '#666666',size: '18', type: 'close'}" title="退出登录"
                     link
                     @click="exitLogin"></uni-list-item>
    </uni-list>
  </view>
  <view>
  </view>
</template>

<script setup>
import {
  ref
} from "vue"
const curVersion = ref(uni.getAppBaseInfo().appVersion)


function onClick(event, opt) {
  if (opt == 2) {
    //版本号
    Tips.toast('当前版本号：' + curVersion.value)
  } else if (opt == 3) {

  }
}



</script>

<style lang="scss" scoped>
@import "@/common/styles/public.scss";

.top-bar {
  height: var(--status-bar-height);
  background-image: linear-gradient(90deg, #45b2ff, #3265ff);
  color: #fff !important;
}

.header-cont {
  background-image: linear-gradient(90deg, #45b2ff, #3265ff);
  border-radius: 0 0 80rpx 80rpx;
  padding-bottom: 400rpx;
}

.header {
  background: url(@/static/images/top-user-bg.png) center top no-repeat;
  position: absolute;
  top: 0;
  padding-top: var(--status-bar-height);
  width: 100%;
  height: 400rpx;

  .header-msg {
    display: flex;
    align-items: center;
    padding: 80rpx 60rpx;
  }

  .header-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }

  .user-info {
    height: 120rpx;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 14px;
    color: #ffffff;

    .title {
      font-size: 40rpx;
      margin-right: 40rpx;
    }

    .sub-title {
      font-size: 28rpx;
    }
  }
}

.content {
  margin: 30rpx 40rpx;
  position: relative;
  padding: 0 20rpx;
  background-color: #ffffff;
  @extend .card-shadow;
}
@media (prefers-color-scheme: dark) {
  .content {
    background-color: rgb(31, 31, 31);
  }
  ::v-deep .uni-list {
    background-color: rgb(31, 31, 31);
  }
  ::v-deep .uni-list-item {
    background-color: rgb(31, 31, 31) !important;
  }
	::v-deep .uni-list-item__content-title {
		color: #999999 !important;
	}
}

.content-first {
  margin-top: -120rpx;
}

</style>